import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'

import './index.scss'
import { Flex } from 'antd-mobile';
// 顶部导航
import TopNav from '../../component/TopNav'
// 搜索框
import SearchInput from '../../component/SearchInput'

// 轮播图
import SwiperList from '../../component/SwiperList';
// http请求
import myaxios from '../../utils/myaxios';

import ProductData from '../../component/ProductData';

class index extends Component {
  state = {
    catitems: []
  }
  componentDidMount() {
    myaxios.get("home/catitems").then(data => {
      this.setState({ catitems: data.message })
    })

  }
  handleToCategoryClick = () => {
    this.props.history.push('/category')
  }

  render() {
    return (
      <div className="yg-index">
        <TopNav leftIcon={false}>云购商城</TopNav>
        <SearchInput></SearchInput>
        {/* 轮播图开始 */}
        <SwiperList></SwiperList>
        {/* 轮播图结束 */}
        {/* 导航开始 */}
        <Flex className="yg-nav">
          {
            this.state.catitems.map(v => (
              <Flex.Item key={v.image_src}>
                <img className="yg-nav-img" onClick={this.handleToCategoryClick} src={v.image_src} alt="" />
              </Flex.Item>
            ))
          }
        </Flex>
        {/* 导航结束 */}
        <ProductData></ProductData>
      </div>
    )
  }
}
export default withRouter(index)